<template>
  <div :class="`is-${formType}`" class="wk-field-view">
    <template v-if="ignoreFields.includes(props.field)">
      <slot :data="$props"/>
    </template>
    <span v-else-if="isCommonType">{{ getCommonShowValue() }}</span>
    <!-- 如果是boolean类型 -->
    <el-switch v-else-if="formType == 'boolean_value'" :value="value"
               disabled
               active-value="1"
               inactive-value="0"/>
    <!--如果是handwriting类型-->
    <WkSignatureImage v-else-if="formType == 'handwriting_sign'"
                        :src="value"
                        :height="config.signatureHeight"/>
    <!--    如果是desc_text类型-->
    <WkDescText v-else-if="formType == 'desc_text'"
                  :key="Date.now().toString()"
                  :value="value"/>
    <!--如果是location类型-->
    <span v-else-if="formType == 'location'"
          :class="{'can-check':objectHasValue(value, 'address')}"
          @click.stop="mapViewShow=true">
      {{ objectHasValue(value, 'address') ? value.address : '' }}
    </span>
    <!--如果是website类型-->
    <span v-else-if="formType == 'website'"
          :class="{'can-check': !isEmptyFlag}"
          @click.stop="openUrl(value)">
      {{ value }}
    </span>
    <!--如果是file类型-->
    <FileListView v-else-if="formType == 'file'" :list="value || []"/>
    <!--如果是detail_table类型-->
    <WkDetailTableView v-else-if="formType == 'detail_table'"
                          :show-type="props.precisions === 2 ? 'table' : 'default'"
                          :title="props.name"
                          :add-field-list="props.fieldExtendList"
                          :field-form="value"
                          :field-list="props.fieldList">
      <template v-slot:default="{ data }">
        <slot :data="data"/>
      </template>
    </WkDetailTableView>
    <!--如果是其他类型-->
    <template v-else>
      <slot :data="$props"/>
    </template>

    <map-view v-if="mapViewShow"
              v-bind:title="value.address"
              v-bind:lat="value.lat"
              v-bind:lng="value.lng"
              v-on:hidden="mapViewShow=false"/>
  </div>
</template>

<script setup>
import WkSignatureImage from '/src/components/NewCom/WkSignaturePad/Image.vue'
import WkDescText from '/src/components/NewCom/WkDescText/index.vue'
import MapView from '/src/components/MapView.vue' // 地图详情
import FileListView from '/src/szcomponent/FileListView.vue' // 附件
import WkDetailTableView from '/src/components/NewCom/WkDetailTable/View.vue'
import {ref, computed} from "vue"
import merge from '/src/utils/merge.js'
import {isObject, isEmpty} from '/src/utils/types.js'
import {getFormFieldShowName} from './utils'

defineOptions({
  name: 'WkFieldView',
})

const props = defineProps({
  props: Object, // 自定义字段参数信息
  formType: String,
  value: [String, Object, Array, Number],
  // 忽略的字段直接输出
  ignoreFields: {
    type: Array,
    default: () => {
      return []
    }
  }
})


// 控制展示地图详情
const mapViewShow = ref(false)

const DefaultWkFieldView = {
  signatureHeight: '26px'
}

/**
 * 判断对象是否值
 */
function objectHasValue(obj, key) {
  if (isObject(obj)) {
    return !isEmpty(obj[key])
  }
  return false
}

function openUrl(url) {
  if (!url.match(/^https?:\/\//i)) {
    url = 'http://' + url
  }
  window.open(url)
}

/**
 * 获取类型的展示值
 */
function getCommonShowValue() {
  return getFormFieldShowName(props.formType, props.value, '', props.props)
}


const config = computed(() => {
  return merge({...DefaultWkFieldView}, props.props || {})
})

const isEmptyFlag = computed(() => {
  return isEmpty(props.value)
})

const isCommonType = computed(() => {
  return [
    'text',
    'textarea',
    'website',
    'select',
    'checkbox',
    'number',
    'floatnumber',
    'percent',
    'mobile',
    'email',
    'date',
    'datetime',
    'date_interval',
    'user',
    'structure',
    'position'
  ].includes(props.formType)
})

</script>


<style lang="scss" scoped>
.wk-field-view {
  overflow: hidden;
  text-overflow: ellipsis;

  .can-check {
    color: #2362FB;
    //color: $xr-color-primary;
    cursor: pointer;
  }

  &.is-website {
    display: inline;
  }

  &.is-file {
    line-height: 1;
  }
}
</style>
